<template>
  <div :class="['info-item', {'full-row': isfullrow}]">
    <div v-if="label" class="info-item__label">{{ label }}:</div>
    <div class="info-item__value">
      <template v-if="value">{{ value }}</template>
      <slot v-else></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InfoItem',
  // eslint-disable-next-line vue/require-prop-types
  props: ['label', 'value', 'isfullrow'],
  data() {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
  .info-item {
    display: flex;
    width: calc(33.3% - 15px);
    //margin-right: 4px;
    font-size: 14px;
    line-height: 30px;

    &.full-row {
      width: calc(100% - 15px);
    }

    &__label {
      min-width: 100px;
      color: #6a6b6e;
    }

    &__value {
      color: #3a3b3c;
    }
  }
</style>
